<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
  <!--<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">-->
  <title dir="ltr">Solar System</title>
  <!--
  <script src="https://code.jquery.com/jquery-2.1.1.min.js" script type="text/javascript"></script>
-->
  <script src="jquery-2.1.1-min.js" script type="text/javascript"></script>
  <script src="jinquan.js" script type="text/javascript"></script>
  <!--
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
-->
  <script src="jquery-1.8.1-min.js" script type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="main.css">
  <link rel="stylesheet" type="text/css" media="screen" href="jinquan.css">
</head>

<body class="opening hide-UI view-2D zoom-large data-close controls-close">
  <div id="navbar">
    <a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a>
    <h1>Solar System</h1>
    <a id="toggle-controls" href="#controls"><i class="icon-controls"></i>Controls</a>
  </div>
  <div id="data">
    <a class="sun" title="sun" href="#sunspeed">Sun</a>
    <a class="mercury" title="mercury" href="#mercuryspeed">Mercury</a>
    <a class="venus" title="venus" href="#venusspeed">Venus</a>
    <a class="earth active" title="earth" href="#earthspeed">Earth</a>
    <a class="mars" title="mars" href="#marsspeed">Mars</a>
    <a class="jupiter" title="jupiter" href="#jupiterspeed">Jupiter</a>
    <a class="saturn" title="saturn" href="#saturnspeed">Saturn</a>
    <a class="uranus" title="uranus" href="#uranusspeed">Uranus</a>
    <a class="neptune" title="neptune" href="#neptunespeed">Neptune</a>
  </div>
  <div id="controls">
    <label class="set-view">
      <input type="checkbox">
    </label>
    <label class="set-zoom">
      <input type="checkbox">
    </label>
    <label>
      <input type="radio" class="set-speed" name="scale" checked>
      <span>Speed</span>
    </label>
    <label>
      <input type="radio" class="set-size" name="scale">
      <span>Size</span>
    </label>
    <label>
      <input type="radio" class="set-distance" name="scale">
      <span>Distance</span>
    </label>
    <!-- jinquan added. -->
    <label>
      <button type="button" onclick="incEarthOrbitSpeed()">Earth Orbit Speed ➕</button>
    </label>
    <label>
      <button type="button" onclick="setEarthOrbitSpeed()">Earth Orbit Speed ✅</button>
    </label>
  </div>
  <div id="universe" class="scale-stretched">
    <div id="galaxy">
      <div id="solar-system" class="earth">
        <div id="mercury" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Mercury</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="venus" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Venus</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="earth" class="orbit">
          <div class="pos">
            <div class="orbit">
              <div class="pos">
                <div class="moon"></div>
              </div>
            </div>
            <div class="planet">
              <dl class="infos">
                <dt>Earth</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="mars" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Mars</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="jupiter" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Jupiter</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="saturn" class="orbit">
          <div class="pos">
            <div class="planet">
              <div class="ring"></div>
              <dl class="infos">
                <dt>Saturn</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="uranus" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Uranus</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="neptune" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Neptune</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="sun">
          <dl class="infos">
            <dt>Sun</dt>
            <dd><span></span></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  </script>
  <script src="main.js"></script>
</body>

</html>